<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <input type="text" v-model="myname">
        {{getMyname}}
    </div>

    <script>
        new Vue({
            el: "#box",
            data: {
                myname: ""
            },
            computed: {
                getMyname() {
                    return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)
                    //依赖的状态改变了，计算属性会重新计算一遍
                }
            }
        })
    </script>

</body>

</html>